<template>
  <div class="discussion">
    <h2>讨论区互动</h2>
    <el-input v-model="searchQuery" placeholder="搜索讨论..." style="margin-bottom: 20px;"></el-input>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="发表的主题" name="topics">
        <el-list>
          <el-list-item v-for="(topic, index) in paginatedTopics" :key="index">
            <el-divider v-if="index !== 0" class="topic-divider"></el-divider>

            <div class="topic-header">
              <p class="topic-title" @click="openTopicDetail(topic)">{{ topic.title }}</p>
              <el-button 
                type="danger" 
                plain 
                icon="el-icon-delete" 
                size="mini" 
                @click="deleteTopic(index)"
                class="delete-button"
              >
                删除
              </el-button>
            </div>

            <p class="topic-info">
              <span class="author">{{ topic.username }}</span> 发表于 {{ topic.update_time }} | 来自 "<span class="category">{{ topic.semester_name }}</span>"
            </p>
          </el-list-item>
        </el-list>
        <!--发布讨论-->
        <el-button type="primary" @click="postDialogVisible = true" style="margin-top: 20px;">发布讨论</el-button>
        <!-- Pagination component -->
        <el-pagination
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="filteredTopics.length"
          layout="prev, pager, next, jumper, ->, total"
          class="pagination"
        />
        <!-- 发布讨论的对话框 -->
        <el-dialog title="发布讨论" v-model="postDialogVisible" width="60%">
          <el-form ref="postForm" :model="newTopic" label-width="80px">
            <!--讨论标题-->
            <el-form-item label="讨论标题" required>
              <el-input v-model="newTopic.title" placeholder="请输入讨论标题"></el-input>
            </el-form-item>
            <!-- 富文本编辑器 -->
            <el-form-item label="讨论详情" required>
              <TextEditor ref="textEditor" v-model="newTopic.content" />
            </el-form-item>
            <!--讨论发布时间-->
            <el-form-item label="发表于">

              <el-input v-model="newTopic.update_time" readonly />

            </el-form-item>
          </el-form>
          <template v-slot:footer>
            <span class="dialog-footer">
              <el-button @click="postDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitTopic">发布</el-button>
            </span>
          </template>
        </el-dialog>
        
        <!-- 讨论详情的对话框 -->
        <el-dialog :title="selectedTopic.title" v-model="detailDialogVisible" width="60%">
          <div v-html="selectedTopic.content"></div> <!-- 使用 v-html 渲染 HTML 内容 -->
          <template v-slot:footer>
            <el-button @click="detailDialogVisible = false">关闭</el-button>
          </template>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane label="发表的回复" name="replies">
        <div v-if="replies.length <= 0">暂无发表的回复</div>
        <el-card v-for="(reply, index) in paginatedReplies" :key="index" class="reply-card">
          <p>{{ reply.content }}</p>
          <p>{{ reply.username }} 回复于 {{ reply.update_time }} | 来自课堂话题 "{{ reply.post_content }}"</p>
          <div class="actions">

            <el-button type="text" @click="deleteReply(reply.id)">删除</el-button>

          </div>
        </el-card>
        <el-pagination
          @current-change="ReplyPageChange"
          :current-page="currentReplyPage"
          :page-size="pageSize"
          :total="replies.length"
          layout="prev, pager, next, jumper, ->, total"
          class="pagination"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import TextEditor from './TextEditor.vue'; // 假设你已经有了TextEditor.vue组件

export default {
  components: {
    TextEditor
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 4,
      activeTab: 'topics',
      searchQuery: '',
      topics: [
        {
          title: "讨论1 - 图片",
          content: '<p>这是一个带有图片的讨论。</p><img src="https://via.placeholder.com/300" alt="示例图片" style="max-width: 100%;"/>',
          username: '张三',
          update_time: '2024年4月1日',
          semester_name: '游戏开发'
        },
        {
          title: "讨论2 - 视频",
          content: '<p>这是一个带有视频的讨论。</p><video controls style="max-width: 100%;"><source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">您的浏览器不支持视频标签。</video>',
          username: '李四',
          update_time: '2024年4月2日',
          semester_name: '前端开发'
        },
        {
          title: "讨论3 - 表格",
          content: `
            <p>这是一个带有表格的讨论。</p>
            <table border="1" style="width: 100%; border-collapse: collapse;">
              <tr>
                <th>名称</th>
                <th>分数</th>
              </tr>
              <tr>
                <td>张三</td>
                <td>80</td>
              </tr>
              <tr>
                <td>李四</td>
                <td>90</td>
              </tr>
            </table>
          `,
          username: '王五',
          update_time: '2024年4月3日',
          semester_name: '后端开发'
        }
      ], // 讨论话题列表
      selectedTopic: {}, // 当前选择的讨论详情
      replies: [],
      postDialogVisible: false, // 发布讨论的弹窗控制
      detailDialogVisible: false, // 讨论详情的弹窗控制
      newTopic: {
        title: '',
        content: '',
        username: '我',
        semester_name: '当前学期',
        update_time: new Date().toLocaleString()
      },
      currentReplyPage: 1
    };
  },
  computed: {
    filteredTopics() {
      return this.topics.filter(topic => topic.title.includes(this.searchQuery));
    },
    paginatedTopics() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredTopics.slice(start, end);
    },
    paginatedReplies() {
      const start = (this.currentReplyPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.replies.slice(start, end);
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    ReplyPageChange(page) {
      this.currentReplyPage = page;
    },
    openTopicDetail(topic) {
      this.selectedTopic = topic; // 设置当前选中的话题
      this.detailDialogVisible = true; // 打开详情对话框
    },
    submitTopic() {
      const editorContent = this.$refs.textEditor.getContent(); // 获取富文本内容

      if (!this.newTopic.title || editorContent.trim() === '') {
        this.$message.error('请输入标题和内容');
        return;

      }
      
      this.newTopic.content = editorContent; // 设置newTopic的内容
      this.newTopic.update_time = new Date().toLocaleString(); // 更新发布时间
      this.topics.push({ ...this.newTopic }); // 添加新讨论

      // 重置表单和关闭弹窗
      this.postDialogVisible = false;
      this.resetNewTopic();
      this.$message.success('发布成功');
    },
    resetNewTopic() {
      this.newTopic = {
        title: '',
        content: '',
        username: '我',
        semester_name: '当前学期',
        update_time: new Date().toLocaleString()
      };
      this.$refs.textEditor.clearContent(); // 清空编辑器内容
    },
    deleteTopic(index) {
      this.topics.splice(index, 1); // 删除讨论
      this.$message.success('删除成功');
    },

    deleteReply(replyId) {
      this.replies = this.replies.filter(reply => reply.id !== replyId); // 删除回复
      this.$message.success('删除成功');

    }
  }
};
</script>

<style scoped>
.discussion {
  margin-left: 50px;
  margin-top: 20px;
  width: calc(100% - 250px);
  background: rgba(245, 245, 245, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

h2 {
  color: #409EFF;
  font-size: 24px;
  margin-bottom: 20px;
}

.el-tabs {
  width: 100%;
}

.el-list-item {
  margin-bottom: 10px;
  font-size: 16px;
}

.el-divider {
  margin: 10px 0;
  border-color: #dcdcdc;
}

.topic-divider {
  border-color: #dcdcdc;
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topic-title {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: #282c30;
  margin-right: 10px;
}

.topic-title:hover {
  text-decoration: underline;
  background-color: rgba(64, 158, 255, 0.1);
}

.topic-info {
  font-size: 14px;
  color: rgba(96, 102, 102, 0.8);
}

.author, .category {
  color: #409EFF;
}

.el-button {
  margin-top: 10px;
}

.reply-card {
  background-color: white;
  margin-bottom: 10px;
  padding: 20px;
  border-radius: 5px;
}

.pagination {
  margin-top: 20px;
}

/* 删除按钮的样式 */
.delete-button {
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.delete-button:hover {
  background-color: #ffe7e7;
}

/* 表格的基础样式 */
table {
  width: 100%; /* 表格宽度占满容器 */
  border-collapse: collapse; /* 去除单元格之间的空隙 */
  margin-bottom: 20px; /* 表格与其他元素的间距 */
}

/* 表格单元格和标题样式 */
th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px; /* 单元格内的内容与边框之间的填充 */
  text-align: left; /* 左对齐 */
}

/* 表头背景颜色 */
th {
  background-color: #f2f2f2;
  font-weight: bold; /* 加粗 */
}

/* 表格行的背景颜色交替 */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 鼠标悬停时高亮 */
tr:hover {
  background-color: #f1f1f1;
}

/* 让内容自适应宽度 */
table {
  table-layout: auto;
}

</style>
